<div class="chart-wrapper">
  <canvas
    #canvas
    baseChart
    chartType="doughnut"
    [datasets]="chartDatasets()"
    [options]="chartOptions"
    [width]="100"
    [height]="100"
  ></canvas>
</div>

<div class="chart-description">
  <h3 class="chart-header">
    <span class="chart-title">{{ 'Total Allocation' | translate }}:</span>
    <span>
      {{ dataset().used.parsed | ixFileSize }}
    </span>
  </h3>
  <div class="legend-wrapper">
    @if (dataset().usedbydataset.parsed) {
      <div class="legend-list-item">
        <span class="legend-label">
          <span
            class="legend-swatch"
            [style.background-color]="swatchColors?.usedbydataset?.backgroundColor"
          ></span>
          {{ 'Data Written' | translate }}
        </span>
        <span class="legend-value">
          {{ dataset().usedbydataset.parsed | ixFileSize }}
          @if (dataset().usedbydataset.parsed) {
            ({{ dataset().usedbydataset.parsed / dataset().used.parsed | percent }})
          }
        </span>
      </div>
    }

    @if (!isZvol()) {
      @if (dataset().usedbychildren.parsed) {
        <div class="legend-list-item">
          <span class="legend-label">
            <span
              class="legend-swatch"
              [style.background-color]="swatchColors?.usedbychildren?.backgroundColor"
            ></span>
            {{ 'Children' | translate }}
          </span>
          <span class="legend-value">
            {{dataset().usedbychildren.parsed | ixFileSize }}
            @if (dataset().usedbychildren.parsed) {
              ({{ dataset().usedbychildren.parsed / dataset().used.parsed | percent }})
            }
          </span>
        </div>
      }
    }
  </div>
</div>
